{% extends "frame/tabpages.html" %}
{% block content %}
<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <form class="layui-form layui-col-space5" id="id_searchProductForm">{% csrf_token %}
                            <div class="layui-inline layui-show-xs-block">
                                <input class="layui-input" type="text" name="filter_name"  placeholder="分类名称" id="id_name">
                            </div>
                            <div class="layui-inline layui-show-xs-block xxxListButton">
                                <!--不能用button,如果使用button的话,会发送两次请求.
                                    button 的type button默认为type的值为submit,submit会默认提交一次,
                                    再加上js里的提交就会出现重复提交的问题,把type的值改为button就可以解决问题了-->
                                <!--button class="layui-btn"  data-type="reload" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i>查询</button-->
                                <a class="layui-btn"  id="searchBtn" data-type="reload" lay-submit=""><i class="layui-icon">&#xe615;</i>查询</a>
                                <a class="layui-btn"  id="resetBtn" data-type="reset" lay-submit=""><i class="layui-icon">&#xe666;</i>重置</a>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table id="id_categorylist" class="layui-table layui-form"  lay-filter="f_categorylist"></table>
                    </div>
                </div>
            </div>
        </div>
    </div> 
{% include "frame/searchBindMode.html" %}
</body>
{% endblock %}

{% block jsscript %}
<script type="text/html" id="toolbarProductList">
    <div class="layui-btn-group xxxListButton">
        <a class="layui-btn layui-btn-danger" data-type="delAllChecked"><i class="layui-icon"></i>批量删除</a> 
        <a class="layui-btn" onclick="xadmin.open('添加产品分类','add',400,200)"><i class="layui-icon"></i>添加</a>
        <a class="layui-btn layui-btn-small" onclick="location.reload()" id= "id_refresh" title="刷新">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </div>
</script>

<script type="text/html" id="toolbarOper">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['jquery','table', 'tree'], function(){
        var table = layui.table;
        var $ = layui.$
        
        var loading = layer.load(0, {shade: false});

        table.render({
            elem: '#id_categorylist', 
            method: 'post',
            url: "{% url 'product:show_categoryList' %}", //数据接口
            height: 'full-180',
            page: true, //开启分页
            limit: 10,
            loading: true,
            toolbar: '#toolbarProductList',
            defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips',
                }],
            cols: [[ //表头
                {type: 'checkbox', width:'10%',},
                {type: 'numbers', title: '序号',     width:'10%', align:'center'},
                {field: 'name', title: '分类名称',   width:'20%', align:'center', sort: true},
                {title: '详情',                      width:'20%', align:'center',
                    templet: function(d){
                        var str = "<a style='cursor: pointer' onclick=\"xadmin.open('产品分类详情', '{% url 'product:show_categoryDetail' '000' %}')\">查看</a>";
                        str = str.replace('000', d.id) ;
                        return str; 
                    }
                },
                {field: 'created',  title: '创建时间',   width:'25%', align:'center', sort: true},
                {title: '操作', toolbar: '#toolbarOper', width:'15%', align:'center'}
            ]],
            done:function(res){
                layer.close(loading);
            }
        });  
  
        table.on('tool(f_categorylist)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定要删除?', function(index){
                    $.ajax({
                        type:'post',
                        url:"{% url 'product:show_categoryDel' 0 %}".replace('0', data.id),
                        data:{},
                        success:function(res){
                            if (res.code == 0)
                            {
                                layer.msg("删除成功!");
                                obj.del();
                                layer.close(index);
                            }
        
                        },
                        error:function(res)
                        {
                            layer.msg("删除失败!");
                        }
                    });
                });
            } else if(obj.event === 'edit'){
                uri = obj.data.id + '/update'; 
                xadmin.open('编辑分类',uri,400,200);
            }
        
        });

        active = {
            delAllChecked: function(){ //获取选中数据
                var checkStatus = table.checkStatus('id_categorylist');
                data = checkStatus.data;
                data.forEach((item, index, array)=>{
                    $.ajax({
                        type:'post',
                        url:"{% url 'product:show_categoryDel' 0 %}".replace('0', item.id),
                        data:{},
                        success:function(res){
                            if (res.code == 0)
                            {
                                layer.msg("删除成功!");
                                location.reload();
                            }
                        },
                        error:function(res)
                        {
                            layer.msg("删除失败!");
                        }
                    });
                })
            },
            reload: function(){
                table.reload('id_categorylist', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                       filter_name: $("input[name=filter_name]").val(),
                    }
                });
            },
            reset: function(){
                $("#id_searchProductForm")[0].reset();
                $("#id_refresh").click();
            }
        };

        $('.xxxListButton .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
});

</script>
{% endblock %}
